<template>
  <div class="filtration">
    <span><!--方案--> {{ $t('btn.scheme') }}：</span>
    <el-tag class="scheme" @click="filterCli(1)"><!--缺省方案-->{{ $t('btn.packageq') }}</el-tag>
    <el-tag
      v-for="(item, index) in scheme"
      :key="index"
      class="scheme"
      closable
      :type="item.color"
      @close="handleClose(item)"
      @click="filterCli(item)"
    >
      <i
        class="el-icon-edit"
        style="color: #409EFF;"
        @click.stop="editScheme(item)"
      />
      {{ item.jsonDetails.fname }}
    </el-tag>
    <i
      class="el-icon-circle-plus-outline"
      style="color: #409EFF;cursor: pointer;"
      @click="openScheme"
    />
    <!--  添加方案  -->
    <el-dialog
      v-dialogDrag
      :title="$t('btn.addPackage')"
      :visible.sync="customVisable"
      width="640px"
      top="5vh"
      center
      append-to-body
      :close-on-click-modal="false"
      close-on-press-escape
    >
      <!--      方案名称-->{{ $t('btn.schemeName') }}：
      <el-input v-model="customName" size="mini" style="width: 150px;margin-right: 10px;" />
      <el-checkbox v-model="fdefault">是否默认</el-checkbox>
      <div v-if="condition===0" style="position: relative">
        <span style="line-height: 36px;"><!--搜索条件-->{{ $t('btn.searCondition') }}: </span>
        <search
          :msg="msg"
          :options="selectData"
          :search-son="searchSon"
          style="margin-left: 60px"
          @seek="collect"
        />
      </div>
      <div style="margin-top: 10px">
        <el-transfer
          v-model="value"
          filterable
          :filter-method="filterMethod"
          :data="data"
          :titles="[$t('btn.alline'), $t('btn.showline')]"
          target-order="push"
          clear-query="right"
          @right-check-change="topBom"
        >
          <span slot-scope="{ option }">{{ option.index }} - {{ option.label }}</span>
          <!--占位-->
          <div slot="left-footer" class="transfer-footer">
            <!-- <el-button size="mini" @click="upward">向上移</el-button>-->
            <!-- <el-button size="mini" @click="down">向下移</el-button>-->
          </div>
          <div slot="right-footer" class="transfer-footer">
            <el-button size="mini" @click="upward">向上移</el-button>
            <el-button size="mini" @click="down">向下移</el-button>
          </div>
        </el-transfer>
        <!-- [所有列，显示列] -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="customVisable = false">{{ $t('btn.cancel') }}</el-button>
        <el-button size="mini" type="primary" @click="custom">{{ $t('btn.confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import search from '@/components/Search'
// import searData from '@/components/Search/mixin'
import { insertProgram, queryProgram, delProgram, updateProgram } from '@/api/userFilter'

export default {
  components: {
    search
  },
  // mixins: [searData],
  props: {
    ftype: {
      type: [Number, String],
      default: -1 || ''
    },
    condition: {
      type: Number,
      default: 0
    },
    tableHeader: {
      type: Array,
      default: function() {
        return []
      }
    },
    detailHeader: {
      type: Array,
      default: function() {
        return []
      }
    },
    selectData: {
      type: Array,
      default: function() {
        return []
      }
    },
    msg: {
      type: String,
      default: ''
    }
  },
  data() {
    const generateData = _ => {
      const data = []
      this.tableHeader.forEach((item, index) => {
        data.push({
          index: index + 1,
          key: item.label,
          label: item.label
        })
      })
      return data
    }
    return {
      data: generateData(),
      customName: '',
      fdefault: true,
      customVisable: false,
      searchSon: [],
      scheme: [],
      value: [],
      header: [],
      checkDate: [],
      filterMethod(query, item) {
        return item.label.indexOf(query) > -1
      }
    }
  },
  created() {
    this.queryProgram()
  },
  methods: {
    collect(ev) {
      this.searCollData = ev
    },
    // 点击标签
    filterCli(data) {
      if (data === 1) {
        data = { fname: '筛选方案' }
        this.scheme.map(item => {
          item.color = 'priamry'
        })
      }
      // 点击变色
      this.scheme.map(item => {
        if (item.searchId === data.searchId) {
          data.color = 'success'
        } else {
          item.color = 'priamry'
        }
      })
      this.customVisable = true
      this.customVisable = false
      this.$emit('seachData', data.jsonDetails || data)
    },
    // 新增
    custom() {
      if (!this.customName) {
        this.$confirm('请输入方案名称!!!', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        })
        return
      }
      const DATA = {
        searchId: this.searchId || '',
        moduleName: this.ftype,
        fdefault: this.fdefault ? 'Y' : 'N',
        jsonDetails: {
          fname: this.customName,
          detail: this.searCollData,
          header: this.value
        }
      }
      const api = this.searchId ? updateProgram : insertProgram
      api(DATA).then(res => {
        if (res.code === 0) {
          this.queryProgram()
          this.filterCli(DATA)
          this.$message({
            showClose: true,
            message: res.message,
            type: 'success'
          })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
      this.customVisable = false
    },
    // 修改
    editScheme(item) {
      this.customVisable = true
      this.customName = item.jsonDetails.fname
      this.value = item.jsonDetails.header
      this.searchSon = item.jsonDetails.detail
      this.fdefault = item.fdefault === 'Y'
      this.searchId = item.searchId
    },
    // 查询用户方案明细
    queryProgram() {
      const DATA = {
        moduleName: this.ftype
      }
      queryProgram(DATA).then(res => {
        if (res.code === 0) {
          this.scheme = res.data
          res.data.map(item => {
            if (item.fdefault === 'Y') {
              this.filterCli(item)
            } else {
              item.color = 'priamry'
            }
          })
        }
      })
    },
    // 删除
    handleClose(item) {
      this.$confirm('确认要删除么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        delProgram({ searchId: item.searchId }).then(res => {
          if (res.code === 0) {
            this.queryProgram()
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success'
            })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      })
    },
    // 添加方案弹窗
    openScheme() {
      this.customVisable = true
      this.customName = ''
      this.searchId = ''
      this.fdefault = true
      this.value = []
      this.searchSon = []
      // 已有数据
      this.headerVal = []
      this.detailHeader.forEach(item => {
        this.headerVal.push(item.label)
      })
      this.value = this.headerVal
    },
    // 显示列选中数据
    topBom(ev, en) {
      this.checkDate = ev
    },
    // 向上
    upward() {
      this.value.forEach((res, index) => {
        if (res === this.checkDate[0]) {
          index > 0 && this.value.splice(index - 1, 0, this.value.splice(index, 1)[0])
        }
      })
    },
    // 向下
    down() {
      const leng = this.value.length - 1
      try {
        this.value.forEach((res, index) => {
          if (res === this.checkDate[0]) {
            // console.log(index, this.checkDate[0], res)
            index < leng && this.value.splice(index + 1, 0, this.value.splice(index, 1)[0])
            throw ('aaa')
          }
        })
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>
<style>
.el-transfer-panel__body {
  height: 450px;
}
.el-transfer-panel__list.is-filterable {
  height: 365px;
}
</style>
<style lang="scss" scope>
.filtration {
  margin-left: 20px;
  font-size: 14px;

  .el-tag {
    height: 23px;
    line-height: 23px;
    padding: 0 5px;
  }

  span {
    color: #333;
  }

  .scheme {
    font-size: 12px;
    color: #1e9fff;
    margin-right: 5px;
    cursor: pointer;
  }

  .transfer-footer {
    margin-left: 20px;
    padding: 5px;
  }

  .el-icon-edit:hover {
    background: rgba(30, 159, 255);
    color: #FFF !important;
  }

  .el-transfer-panel__body {
    height: 450px;
  }
  .el-transfer-panel__filter {
    margin: 5px;
  }
  .el-transfer-panel__list.is-filterable {
    height: 420px;
  }

  .el-transfer-panel__body.is-with-footer {
    margin-bottom: 50px;
    padding: 0;
  }
}
</style>
